<template>
  <el-row :gutter="24" style="margin-left: 10px">
    <el-tabs class="table-form-detail" type="border-card">
      <el-tab-pane label="操作权限">
        <el-col :span="24">
          <div style="position: absolute">
            <el-button
              size="small"
              type="primary"
              @click="addTab(editableTabsValue)"
            >
              新增权限组
            </el-button>
          </div>

          <el-tabs
            type="card"
            tab-position="left"
            :value="editableTabs[0].id"
            @tab-remove="removeTab"
            @tab-click="(e) => loadTabInfo(e)"
          >
            <el-tab-pane
              v-for="(item, i) in editableTabs"
              :key="item.groupsId"
              :label="item.title"
              :name="item.id"
            >
              <TableMenu
                v-if="chooseKey == i"
                :removeFirst="removeFirstOne"
                :data-id="i"
                :key-id="item.id"
                :getRightGroups="getRightGroups"
              />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="业务数据权限" lazy>
        <EquipmentDetail />
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
import TableMenu from "./tablemenu";
import EquipmentDetail from "./equipmentdetail";
import TableAndButton from "@/components/TableAndButton";
import data from "./const";
import { mapState, mapMutations } from "vuex";
export default {
  components: { TableMenu, TableAndButton, EquipmentDetail },
  data() {
    return {
      chooseKey: "",
      tableKey: 1,
      data,
      menu1: true,
      input1: "",
      input2: "",
      input3: "",
      total: "",
      listLoading: "",
      list: [],
      options: [],
      editableTabsValue: "2",
      editableTabs: [],
      tabIndex: 2,
    };
  },
  created() {
    // 本页面有几组数据需要请求 1权限组信息 2菜单按钮信息 3 用户信息

    this.getMenuList();

    this.getRightGroups();
    this.getRoleList();
    this.getCodeList();
    this.$store.dispatch("system_right/requestRolePage");
  },
  computed: {
    ...mapState(["system_right", "app"]),
  },
  methods: {
    getRoleList() {
      this.$store.dispatch("system_right/requestRoleList").then((res) => {
        // this.$set((this.formOptions.forms)[0],"options",this.$store.state.system_right.roleList)
      });
    },
    getCodeList() {
      this.$store.dispatch("app/getCodeList", ["department"]); // code转码
    },
    getMenuList() {
      this.$store.dispatch("system_right/requestMenuList");
    },

    getRightGroups() {
      this.$store.dispatch("system_right/requestRightGroups").then((res) => {
        this.$set(this, "editableTabs", this.$store.state.system_right.groups);

        this.tabIndex = "tab" + res.length;
        this.editableTabsValue = res.length;
      });
    },
    addTab(targetName) {
      const newTabName = this.tabIndex;
      this.editableTabs.unshift({
        title: "新增权限组",
        name: newTabName,
        content: "新增权限组",
      });

      this.editableTabsValue++;
    },
    // 根据点击得信息查询选中得菜单和账号角色
    loadTabInfo(e) {
      console.log("查询", e);
      this.chooseKey = e.index;
    },
    //新增权限组的删除
    removeFirstOne() {
      this.editableTabs.shift();
    },
    removeTab(targetName) {
      const tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>
<style>
.el-tabs--left .el-tabs__header.is-left {
  margin-top: 60px;
}
.search-user {
  margin: 20px 0;
}
</style>
